<template>
  <div class="home_box">
    <!-- <section class="top">top</section> -->
    <homeHeader/>
    <div class="home-serach">
      <searchHeader search='true' isHome='true'/>
    </div>
    <!-- 导航 -->
    <section class="nav" @click="changeNav($event)">
      <p :class="{'sel':navtype==0}">头部</p>
      <p :class="{'sel':navtype==1}"><a href="#page1" data-id=1>热点资讯</a></p>
      <p :class="{'sel':navtype==2}"><a href="#page2" data-id=2>招标采购</a></p>
      <p :class="{'sel':navtype==3}"><a href="#page3" data-id=3>项目信息</a></p>
      <p :class="{'sel':navtype==4}"><a href="#page4" data-id=4>用户认证</a></p>
      <p :class="{'sel':navtype==5}"><a href="#page5" data-id=5>展厅广告</a></p>
      <p :class="{'sel':navtype==6}"><a href="#page6" data-id=6>采购业主</a></p>
    </section>
    <!-- 副导航 -->
    <section class="nav_s">
      <div class="ctx">
        <!-- nav1 -->
        <div class="nav_1 arrow">
          <div class="nav_top">
            <img src="../assets/fuwu.png" alt="服务">
            <span>服务</span>
          </div>
          <div class="nav_content">
            <!--go 招标信息定制 -->
            <p @click="goDz">信息定制</p>
            <p><a href="http://credit.zgbiaoxun.com/home" style="color:#fff">AAA信用认证</a></p>
          </div>
        </div>

        <!-- nav2 -->
        <div class="nav_2 com">
          <div class="nav_top">
            <img src="../assets/pingtaizhaobiao.png" alt="招标">
            <span>招标</span>
          </div>
          <div class="nav_content">
            <p>
              <span>招标公告</span>
              <span>中标公告</span>
              <span>招标预告</span>
              <span>变更公告</span>
              <span>其他公告</span>
              <span>政采意向</span>
            </p>
          </div>
        </div>

        <!-- nav_3 -->
        <div class="nav_3 arrow">
          <div class="nav_top">
            <img src="../assets/xiangmu.png" alt="服务">
            <span>项目</span>
          </div>
          <div class="nav_content">
            <p>拟在建项目</p>
            <p>VIP独家项目</p>
            <p>业主委托项目</p>
          </div>
        </div>

        <!-- nav_4 -->
        <div class="nav_4 com">
          <div class="nav_top">
            <img src="../assets/fufei.png" alt="招标">
            <span>付费</span>
          </div>
          <div class="nav_content">
            <p>服务列表</p>
            <p>付费方式</p>
          </div>
        </div>

        <!-- nav_5 -->
        <div class="nav_5 arrow">
          <div class="nav_top">
            <img src="../assets/jiqiaofenxi.png" alt="服务">
            <span>技巧</span>
          </div>
          <div class="nav_content">
            <p>招标技巧</p>
            <p>热点资讯</p>
          </div>
        </div>
      </div>
    </section>
    <!-- aside广告 -->
    <section class="sidebar">
      <img src="../assets/h_qrcode.png" alt="">
    </section>

    <!-- page1 -->
    <section class="page1" id='page1'>
      <div class="p1_banner">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide :key="index" v-for="(item,index) in bannerList">
            <img :src="item.attrUrl" :alt="item.name"/>
          </swiper-slide>
           <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="p1_aside">
        <home-title title="今日热点" cls="huomiao" size='big'/>
        <template v-for="item in redianList.slice(0,8)">
          <single-item label="招标" :info="item.title" :id="item.id" />
        </template>
      </div>
      <div class="p2_content">
        <home-title title="项目专区"  cls="xiangmu" size='big'/>
        <div class="xmzq">
            <template v-for="item in xmList.slice(0,16)">
              <single-item class="half" label="招标" :info="item.title" :id="item.id" />
            </template>
          </div>
      </div>
      <div class="p2_aside">

        <template v-if="!login">
          <p class="top_btn_1" @click="gologin">登录会员</p>
          <p class="top_btn_2" @click="goreg">我要注册</p>
        </template>
        <template>
          <p class="top_btn_uname">用户名:{{username}}</p>
          <p class="top_btn_2" @click="logout">退出登录</p>
        </template>

        <div class="p2_navs">
          <p class="sel">我是供应商</p>
          <p class="">我是招标机构</p>
          <p class="">我是业主</p>
        </div>
        <div class="p2_a_content">
          <div class="p2_a_c_l">
            <p class="i1">发布招标</p>
            <p class="i2">评审专家</p>
            <p class="i3">供求对接</p>
          </div>
          <div class="p2_a_c_r"><< 发布信息 >></div>
        </div>
      </div>
      <section class="ad_seat" v-if="tongLanList.length">
        <img :src="tongLanList[0].attrUrl" :alt="tongLanList[0].name">
      </section>
    </section>

    <!-- page2 -->
    <div class="page2" id='page2'>
      <div class="home_font_box">
        <home-font-title title="招标采购" letter="Call For Bids"/>
      </div>

      <div class="page2_content">
        <div class="p2_title">
          <img src="../assets/h_zbzs.png" alt="" class="p2_title_l">
          <div class="p2_com_title_r">
            <div class="p2_com_title_r_t">
              <img src="../assets/h_jingminglaba.png" alt="" class="p2_title_l">
              <p>项目名称项目名称项目名称项目名称项目名称项目名称</p>
            </div>
            <p class="limit_p">项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目...</p>
          </div>
        </div>
        <section class="p2_com p2_1">
          <img :src="zhongBiaoBanner[0].attrUrl" :alt="zhongBiaoBanner[0].name">
        </section>
        <section class="p2_com p2_2">
          <home-title title="中标公告" size='big'/>
          <template v-for="item in zhongBiaoList.slice(0,10)">
            <single-item-2 dot="true" :info="item.title" :id="item.id" />
          </template>
        </section>
        <section class="p2_com p2_3">
          <home-title title="推荐招标" cls="tuijian" size='big'/>
          <template v-for="item in tjzbList.slice(0,10)">
            <single-item-2  dot="true" :info="item.title" :id="item.id" />
          </template>
        </section>
          
        <section class="p2_com p2_4">
          <home-title title="招标预告" size='big'/>
          <template v-for="item in zbygList.slice(0,10)">
            <single-item-2 :info="item.title"  dot='true' :id="item.id" />
          </template>
        </section>       
        <section class="p2_com p2_7">
          <home-title title="招标公告" size='big'/>
          <template v-for="item in zbggList.slice(0,10)">
            <single-item-2 dot="true"  :info="item.title" :id="item.id" />
          </template>
        </section>
         <section class="p2_com p2_5">
          <home-title title="项目变更"  cls="duoxuanti" size='big'/>  
          <template v-for="item in xmbgList.slice(0,10)">
            <single-item-2 dot="true" :info="item.title" :id="item.id" />
          </template>
        </section>
        <section class="ad_seat" v-if="banner9.length">
          <img :src="banner9[0].attrUrl" :alt="banner9[0].name">
        </section>
      </div>
    </div>

    <!-- page3 -->
    <div class="page3" id='page3'>
      <div class="p3_box">
            <div class="p3_left">
              <section class="publish">
                <div class="yefb_head">
                  <div class="yefb_head_box">
                    业主/招标公司发布
                  </div>
                </div>
                <div class="pub_mid">
                  <p class="pub_mid_til">信息发布种类:</p>
                  <div class="pub_mid_box">
                    <p>招标预告</p>
                    <p>招标公告 </p>
                    <p>中标公告</p>
                    <p>变更公告</p>
                    <p>供求信息</p>
                    <p>企业资讯</p>
                    <p>企业招聘</p>
                  </div>
                </div>
                <p class="bot_btn">发布免费信息</p>
              </section>
              <section class="yefb" >
                <div class="yefb_head">
                  <div class="yefb_head_box">
                    业主发布
                  </div>
                  <span class="icon"></span>
                </div>
                <template v-for="item in yzfbList.slice(0,14)">
                  <single-item-2 label="招标" :info="item.title" :id="item.id" />
                </template> 
              </section>
              <section class="zbfb" >
                <img src="../assets/h_fgzx.png" alt="">
                <div class="zbfb_boxs">                  
                  <template v-for="item in zbfbList.slice(0,14)">
                    <single-item-2 arrow="true" :info="item.title" :id="item.id" />
                  </template> 
                </div>
            </section>
            </div>
            <section class="cnlist">
              <div class="cnl_head">招标分类导航</div>        
              <section class="cnlist_info">
                <div class="single" v-for="(item,index) in CnList">
                  <p class="cn_name">工程建筑</p>
                  <div class="cn_box">
                    <p class="" v-for="data in item.entityList">{{data.industryName}}</p>
                  </div>
                </div>
              </section>     
            </section>
            
      </div>
      <section class="mqft">
        <div class="home_font_box">
          <home-font-title title="名企访谈" letter="From The Interview"/>
        </div>
        <div class="mqft_swiper">
          <swiper ref="mySwiper" :options="swiperOptions2" class="swi_box">
            <swiper-slide :key="index" v-for="(item,index) in mqftList">
              <img :src="item.attrUrl" :alt="item.name"/>
            </swiper-slide>
            <div class="swiper-pagination-t" slot="pagination"></div>
        </swiper>
        </div>
            </section>            
        <section class="bg" >
          <!-- <img :src="banner10[0].attrUrl" :alt="banner10[0].name"> -->
        </section>
    </div>


    <!-- page4 -->
    <div class="page4" id='page4'>
      <section class="head_left">
          <div class="">
            <div class="home_font_box">
            <home-font-title title="项目信息" letter="Project Area"/>
          </div>
          <div class="p2_com_title_r">
            <div class="p2_com_title_r_t">
              <img src="../assets/h_jingminglaba.png" alt="" class="p2_title_l">
              <p>项目名称项目名称项目名称项目名称项目名称项目名称</p>
            </div>
            <p class="limit_p">项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目...</p>
          </div>
        </div>
        <section class="p2_com p2_1">
          <home-title title="中标公告" cls="tuijian" size='big'/>
          <template v-for="item in zhongBiaoList.slice(0,9)">
            <single-item-2 dot="true" :info="item.title" :id="item.id" />
          </template>
        </section>
        <section class="p2_com p2_2">
          <home-title title="vip独家项目" cls="isvip" size='big'/>
          <template v-for="item in zhongBiaoList.slice(0,9)">
            <single-item-2 dot="true" :info="item.title" :id="item.id" />
          </template>
        </section>
      </section>
      <section class="head_right">
        <div class="hr_t">
          <span class="hr_t_l">历史招标数据</span>
          <div class="hr_t_r">            
            <span class="hr_t_r_m">8月</span>
            <div class="hr_t_r_y">
              <span>2020</span>
              <span>YEARS</span>
            </div>
          </div>
        </div>
        <div class="hr_mid">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
          <span>6</span>
          <span>7</span>
          <span>8</span>
          <span>9</span>
          <span>10</span>
          <span>11</span>
          <span>12</span>
          <span>13</span>
          <span>14</span>
          <span>15</span>
          <span>16</span>
          <span>17</span>
          <span>18</span>
          <span>19</span>
          <span>20</span>
          <span>21</span>
          <span>22</span>
          <span>23</span>
          <span>24</span>
          <span>25</span>
          <span>26</span>
          <span>27</span>
          <span>28</span>
          <span>29</span>
          <span>30</span>
        </div>
        <div class="hr_bot"></div>
      </section>
      <section class="p4_bottom">
        <div class="yxgys">
          <home-title title="优秀供应商" noarrow='true' size='big'/>
          <template v-for="item in banner12">
            <div class="ys_single" >
              <img :src="item.ulr" alt="logo">
              <p class="">{{item.name}}</p>
            </div>
          </template>
        </div>
        <div class="p4_mid">
          <section class="p2_com p2_2">
            <home-title title="拟在建项目" size='big'/>
            <template v-for="item in zhongBiaoList.slice(0,9)">
              <single-item-2 dot="true"  :info="item.title" :id="item.id" />
            </template>
          </section>
        <section class="p2_com p2_2">
          <home-title title="业主委托项目" size='big'/>
          <template v-for="item in zhongBiaoList.slice(0,9)">
            <single-item-2 dot="true"  :info="item.title" :id="item.id" />
          </template>
        </section>
        </div>
        <div class="bs_down">
          <p class="bs_down_tit">标书下载</p>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
          <div class="bd_single">
            <div class="left"></div>
            <div class="right">
              <p class="bs_title">标题标题标题标题标题</p>
              <p class="bs_note">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- page5 -->
    <div class="page5" id='page5'>
      <div class="content">
        <div class="left">
            <div class="yzzq">
              <home-title title="业主专区" size='s' letter="Call For Bids"/>
              <p class="yzzq_info">可以写一些服务信息介绍等等,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              <div class="imglist">
                <img :src="item.url" alt="" v-for="item in banner13">
              </div>
            </div>
            <div class="yhrz">
              <home-title title="用户认证" size='s' letter="Authentification Of User"/>
              <section class="yhrz_box">
                <div class="yhrz_l">
                  <div class="yhrz_l_box">
                    <p class="yhrz_l_til">AAA信用等级认证意义</p>
                    <div class="yhrz_l_list">
                      <template v-for="item in zhongBiaoList.slice(0,5)">
                        <single-item-2 dot="true" :info="item.title"  nodate="true" :id="item.id" />
                      </template>
                    </div>
                  </div>
                </div>
                <div class="yhrz_r">
                  <home-title title="用户认证流程" size='big' noarrow='true'/>
                  <p class="btn">申请认证>></p>
                </div>
              </section>
            </div>
            <div class="zszs">
              <home-title title="证书展示" size='s' letter="Certificate showing"/>
              <div class="imglist">
                <img :src="item.url" alt="" v-for="item in banner11">
              </div>
            </div>
        </div>
        <div class="right">
          <home-title title="供求信息" size='s' letter="supply and demand"/>
          <section class="supply_p5">
            <supply-box title="供应信息" btn="发布供应信息" cls="gyxx"/>
          </section>
          <section class="supply_p5">
            <supply-box title="需求信息" btn="发布需求信息" cls="xqxx"/>
          </section>
          <section class="supply_p5">
            <supply-box title="免费信息" btn="" cls="mfxx"/>
          </section>
        </div>
      </div>
    </div>

    <!-- page6 -->
    <div class="page6" id='page6'>
      <div class="home_font_box">
        <home-font-title title="展厅广告" letter="Advertising Cooperation"/>
      </div>
      <div class="imglist">
        <img :src="item.url" alt="" v-for="item in banner7">
      </div>
      <p>这里可以加一些广告招租的合作文案这里可以加一些广告招租的合作文案这里可以加一些广告招租的合作文案这里可以加一些广告招租的合作文案这里可以加一些广告招租的合作文案</p>
      <!-- 地区导航 -->
      <div class="area">
        <p class="a_title">地区导航</p>
        <div class="areas com_pad_box">
          <section class="com_box box1">
            <span class="t1">华东</span>
            <span>上海</span>
            <span>江苏</span>
            <span>山东</span>
            <span>安徽</span>
            <span>浙江</span>
            <span>福建</span>
            <span>江西</span>
          </section>
          <section class="com_box box2">
            <span class="t1">华北</span>
            <span>北京</span>
            <span>天津</span>
            <span>河北</span>
            <span>山西</span>
            <span>内蒙古</span>
          </section>
          <section class="com_box box3">
            <span class="t1">东北</span>
            <span>辽宁</span>
            <span>吉林</span>
            <span>黑龙江</span>
          </section>
          <section class="com_box box1">
            <span class="t1">西东</span>
            <span>陕西</span>
            <span>青海</span>
            <span>甘肃</span>
            <span>新疆</span>
            <span>宁夏</span>
          </section>
          <section class="com_box box2">
            <span class="t1">西南</span>
            <span>重庆</span>
            <span>四川</span>
            <span>云南</span>
            <span>贵州</span>
            <span>西藏</span>
          </section>
          <section class="com_box box3">
            <span class="t1">华南</span>
            <span>广东</span>
            <span>广西</span>
            <span>海南</span>
          </section>
          <section class="com_box box1">
            <span class="t1">华中</span>
            <span>河南</span>
            <span>湖北</span>
            <span>湖南</span>
          </section>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="links">
        <p class="a_title">友情链接</p>
        <div class="link_box com_pad_box">
          <span>中国物流网</span>
          <span>清欢网</span>
          <span>成都盛世安泰清洁服务有限公司</span>
          <span>百度竞价账户托管</span>
          <span>成都雅博新业清洁服务有限公司</span>
          <span>天狮公司</span>
          <span>公众号交易</span>
          <span>站长集合地</span>
          <span>优惠券</span>
          <span>古驰包</span>
        </div>
      </div>
    </div>

    <!-- 底部容器   -->
    <div class="page_bottom" id='page7'>
      <div class="ctx">
        <p class="ctx_til">联系方式</p>
        <p class="ctx_info">地址:北京市朝阳区朝阳北路102号楼1层<span>联系电话:400-1859959</span></p>
        <p class="ctx_til">合作机构</p>
        <p class="ctx_info">中国国际招标有限公司<span>万达集团</span></p>
        <div class="r_ctx">
          <img src="" alt="">
          <img src="" alt="">
          <p>获取更多服务 关注官方微信</p>
          <p>获取更多服务 关注官方微信</p>
        </div>
      </div>
    </div>

    <!-- 底部容器   -->
    <div class="page_bottom_about">
      <div class="page_bottom_cont">
        <div class="pba_left">
          <span>关于我们</span>
          <span>人才中心</span>
          <span>客服中心</span>
          <span>网站导航</span>
        </div>
        <div class="pba_right">
          <img src="../assets/head_logo.png" alt="">
          <p>北京易讯企业管理咨询有限公司 ICP备案号：京ICP备17052652号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {  
		mapState,
	} from 'vuex'; 
import {
  getData,
  getHomeModal,
  getAd,
  getCNList
} from "@/api/api";

import HomeTitle from "@/components/HomeTitle.vue";
import HomeFontTitle from "@/components/HomeFontTitle.vue";
import SingleItem from "@/components/SingleItem.vue";
import SingleItem2 from "@/components/SingleItem2.vue";
import SupplyBox from "@/components/SupplyBox.vue";
import searchHeader from "@/components/searchHeader.vue";
import HomeHeader from "@/components/HomeHeader.vue";

export default {
  name: "Home",
  components: {
    HomeTitle,
    HomeFontTitle,
    SingleItem,
    SingleItem2,
    SupplyBox,
    searchHeader,
    HomeHeader,
  },
  computed: {
			...mapState(['login','userInfo'])
	},  
  data(){
    return {
      bannerList:[],//轮播图  slotId:5
      tongLanList:[],//首页通栏广告位一  slotId:2
      zhongBiaoBanner:[],//中标List  slotId:6
      banner9:[],//轮播图  slotId:9
      mqftList:[],//名企访谈  slotId:8
      banner10:[],//访谈下  slotId:10
      banner12:[],//优秀供应商  slotId:12
      banner13:[],//证书展示  slotId:13
      banner11:[],//证书展示  slotId:11
      banner7:[],//证书展示  slotId:7

      redianList:[],//热点列表 channelId=''
      xmList:[],//项目专区 channelId=2
      zbggList:[],//招标公告 channelId=11
      zhongBiaoList:[],//中标公告 channelId=12      
      zbygList:[],//招标预告 channelId=13 
      vipList:[],//vip独家 channelId=21 

      tjzbList:[],//推荐招标 channelId=???              暂缺
      xmbgList:[],//项目变更 channelId=???              暂缺

      CnList:[],//招标分类导航
      yzfbList:[],//业主发布 isOwner=1 
      zbfbList:[],//招标发布 isBid=1 
       
      

      swiperOptions: {
        autoplay: {
          delay: 3000, //3秒切换一次
          disableOnInteraction: false,  //鼠标拖动后继续自动轮播
        },
        pagination:{
          el:'.swiper-pagination',
          clickable:true,
        },//这样写小圆点就有了
        observer: true,
        observeParents: true
      },

      swiperOptions2:{
        slidesPerView: 5,
        spaceBetween: 30,
        slidesPerGroup: 1,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: '.swiper-pagination-t',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      username:'',//用户名
      navtype:0,//navsel选中态
    }
  },
  mounted(){
    let data = JSON.parse(this.userInfo);
    this.username = data.username;

    // 获取广告
    this.getAdData({slotId:2},'tongLanList');
    this.getAdData({slotId:2},'zhongBiaoBanner');
    this.getAdData({slotId:5},'bannerList');
    this.getAdData({slotId:8},'mqftList');
    this.getAdData({slotId:9},'banner9');
    this.getAdData({slotId:10},'banner10');
    this.getAdData({slotId:12},'banner12');
    this.getAdData({slotId:13},'banner13');
    this.getAdData({slotId:11},'banner11');
    this.getAdData({slotId:7},'banner7');

    this.getData('','redianList');
    this.getData({channelId:2},'xmList');  
    this.getData({channelId:11},'zbggList');
    this.getData({channelId:12},'zhongBiaoList');
    this.getData({channelId:13},'zbygList');

    // 获取分类导航
    this.getCategoryNavigation();
    // 获取业主发布
    this.getData({isOwner:1},'yzfbList');  
    // 获取招标发布
    this.getData({isBid:1},'zbfbList');  

    // 暂缺
    this.getData({channelId:2},'tjzbList');
    this.getData({channelId:2},'xmbgList');
  },
  methods:{
    // 获取广告
    getAdData(param,goal){
      getAd(param).then(res=>{
        // "/member/upload/pms/201807/01121655x1v6.png"
        // https://www.apple.com.cn/v/home/t/images/heroes/ipad-air/hero__dvsxv8smkkgi_large_2x.jpg
        this[goal] = res.page.list;
      }).catch(err=> console.log(err,11))
    },
    // 获取数据
    getData(param,goal){
      getData().then(res => {
        if(res.code==0){
          this[goal] = res.list;
        }else{
          alert(res.msg);
        }
      });
    },
    // 分类导航
    getCategoryNavigation(){
      getCNList().then(res=>{
        this.CnList = res.list;
      })
    },
    gologin(){
        this.$router.push('/login');
    },
    goreg(){
        this.$router.push('/register');
    },
    logout(){
        this.$store.commit('resetState')
    },
    changeNav(e){
      this.navtype = e.target.dataset.id;
    },
    goDz(){
      alert('招标信息定制')
    },
    goOther(){
      alert('其他全跳转列表页')
    }
  }
};
</script>


  

<style lang="scss" scoped>


.home-serach{
  width: 980px;
  margin: 0 auto;
}
// 公用样式start
.home_font_box{
    width: 980px;
    margin: auto;
}
.p2_com_title_r{
  width: 650px;
  margin-left: 10px;
  border-bottom: 1px dashed #B7B7B7;    
  .p2_com_title_r_t{
    font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
    img{
      width: 124px;
      margin-right: 16px;
      height: 24px;
    }
  }
  .limit_p{
    font-size: 12px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
// 公用样式end


.home_box {
  // width: 980px;
  // margin: auto;
}
.com {
  width: 980px;
  margin: auto;
}
.top {
  background-color: #c8c8c8;
  // position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header {
  @extend .com;
}
// 广告占位
.ad_seat {
  width: 100%;
  height: 130px;
  margin-top: 19px;
  background-color: #dedede;
}
.com_shad {
  box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
}

// 导航
.nav {
  @extend .com;
  display: flex;
  p {
    font-size: 16px;
    color: #2d2d2d;
    margin-right: 60px;
    padding-bottom: 7px;
    font-weight: 500;
    cursor: pointer;
  }
  .sel {
    border-bottom: 3px solid #454545;
  }
}

// 副导航
.nav_s {
  height: 126px;
  background: -webkit-linear-gradient(top, #58a4d7 0%, #125e97 100%);
  .ctx{
    width: 980px;
    margin: auto;
    display: flex;
  }
  .arrow{
    flex-shrink: 0;
    width: 231px;
    height: 126px;
    background: url(../assets/h_arrow.png) 100% 100% no-repeat;
    .nav_top{
      margin: 23px 0  0 65px;
      border-left: 2px solid #DDA955;
      line-height: 1;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      img{
        margin: 0 6px;
      }
    }
    .nav_content{
      font-size: 12px;
      color: #ffffff;
      padding: 12px 40px 10px 74px;
      p{
        line-height: 1.8;
      }
      span{
        display: inline-block;
        margin-right: 10px;
      }
    }
  }

  .com{
    width: 140px;
    height: 126px;
    .nav_top{
      margin: 23px 0  0 13px;
      border-left: 2px solid #DDA955;
      line-height: 1;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      img{
        margin: 0 6px;
      }
    }
    .nav_content{
      font-size: 12px;
      color: #ffffff;
      padding: 12px 3px 10px 21px;
      p{
        line-height: 1.8;
      }
      span{
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  
}

// 侧边栏
.sidebar{
  position: fixed;
  top: 381px;
  right: 30px;
}



// page1
.page1 {
  display: flex;
  flex-wrap: wrap;
  padding: 44px 0 37px 0;
  @extend .com;
  .p1_banner {
    width: 650px;
    height: 225px;
    // background-color: #7e7e7e;
    margin: 0 10px 5px 0;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
  .p1_aside {
    width: 320px;
    height: 225px;
    @extend .com_shad;
  }
  .p2_content {
    width: 650px;
    height: 225px;
    margin-right: 10px;
    @extend .com_shad;
    overflow: hidden;
    .xmzq{
      display: flex;
      flex-wrap: wrap;
    }
    .half{
      width: 302px;
    }
  }
  .p2_aside {
    width: 320px;
    height: 225px;
    .top_btn_1{
      width: 320px;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      background: linear-gradient(0deg, #1B689F, #4D99CD);
      border-radius: 4px;
      text-align: center;
      margin-bottom: 3px;
    }
    .top_btn_2{
      width: 320px;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      background: linear-gradient(0deg, #F0BE57, #E0AC56);
      border-radius: 4px;
      text-align: center;
      margin-bottom: 4px;
    }
    .top_btn_uname{
      margin: 5px 0;
    }
    .p2_navs{
      position: relative;
      height: 27px;
      p{
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        width: 105px;
        height: 27px;
        text-align: center;
        line-height: 27px;
        background: #fff;
        box-shadow: 1px 0px 3px 0px rgba(94, 94, 94, 0.33);
        border-radius: 10px 10px 0px 0px;
      }
      p:nth-of-type(1){
        z-index: 3;
        border-radius: 0px 10px 0px 0px;
      }
      p:nth-of-type(2){
        z-index: 2;
        left:93px;
      }
      p:nth-of-type(3){
        z-index: 1;
        left:183px;
      }
      .sel{
        z-index: 9;
        background: linear-gradient(0deg, #F6F6F6, #DCDCDC);
      }
    }
    .p2_a_content{
      width: 320px;
      height: 119px;
      background: #FFFFFF;
      border: 1px solid #E7E7E7;
      box-shadow: 0px 1px 1px 0px rgba(94, 94, 94, 0.47);
      display: flex;
      align-items: center;
    }
    .p2_a_c_l{
      width: 206px;
      padding-left: 18px;
      p{
        font-size: 12px;
        color: #333333;
        font-weight: bold;
        padding-left: 22px;
        display: inline-block;
      }
      .i1{
        background: url(../assets/h_xinxifabu.png) no-repeat;
        background-size: 15px 13px;
      }
      .i2{
        background: url(../assets/h_pingshenxinxi.png) no-repeat;
        background-size: 13px 13px;
        margin-left: 27px;
      }
      .i3{
        background: url(../assets/h_gongqiu.png) no-repeat;
        background-size: 15px 14px;
        margin-top: 25px;
      }
    }
    .p2_a_c_r{
      width: 96px;
      height: 107px;
      line-height: 107px;
      border-left: 1px solid #ECECEC;
      font-weight: 600;
      font-size: 10px;
      color: #2D2D2D;
      text-align: center;
    }
  }
}

// page2
.page2 {
  background: #DCDCDC url(../assets/h_page2_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 35px 0 43px 0;  
  .page2_content {
    @extend .com;
  }
  .p2_title{
    display: flex;
    margin: 9px 0 8px 0;
  }
  .p2_title_l{
    width: 320px;
    height: 48px;
  }
  .p2_com {
    display: inline-block;
    width: 320px;
    height: 280px;
    @extend .com_shad;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .p2_com:nth-of-type(3n-1) {
    margin: 0 10px 10px 10px;
  }
  .ad_seat {
    margin-top: 2px;
  }
}
//page2-end
.page3{
  position: relative;
  .p3_box{
    position: relative;
    @extend .com;
    margin: auto;
  }
  .p3_left{
    display: flex;
    flex-wrap: wrap;
  }
  .publish{
    display: inline-block;
    width: 320px;
    height: 364px;
    margin-top: 21px;
    background: url(../assets/h_yzzbgsfb_bg.png) no-repeat;
    background-size: 324px 368px;
    background-position: -2px 2px;
    box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
    .yefb_head{
      background: url(../assets/h_yzzbgsfb.png) no-repeat;
      margin-bottom: 0;
      height: 57px;;
    }
    .pub_mid{
      padding: 23px 25px;
    }
    .pub_mid_til{
      font-size: 18px;
      color:#333333;
    }
    .pub_mid_box{
      p{
           display: inline-block;
          width: 90px;
          height: 21px;
          text-align: center;
          padding-top: 36px;
      }
      p:nth-of-type(1){
        background: url(../assets/h_pub_yugao.png) no-repeat;
        background-size: 18px 18px;
        background-position: 18px 13px;
      }
      p:nth-of-type(2){
        background: url(../assets/h_pub_notice.png) no-repeat;
        background-size: 20px 19px;
        background-position: 18px 13px;
      }
      p:nth-of-type(3){
        background: url(../assets/h_pub_zhongbiaogonggao.png) no-repeat;
        background-size: 18px 18px;
        background-position: 18px 13px;
      }
      p:nth-of-type(4){
        background: url(../assets/h_gongqiu.png) no-repeat;
        background-size: 18px 17px;
        background-position: 18px 13px;
      }
      p:nth-of-type(5){
        background: url(../assets/h_pub_salesman-supplier.png) no-repeat;
        background-size: 21px 23px;
        background-position: 18px 13px;
      }
      p:nth-of-type(6){
        background: url(../assets/h_pub_zixun.png) no-repeat;
        background-size: 18px 17px;
        background-position: 18px 13px;
      }
      p:nth-of-type(7){
        background: url(../assets/h_pub_zhaopin.png) no-repeat;
        background-size: 19px 20px;
        background-position: 18px 13px;
      }
      // p:nth-of-type(8){
      //   background: url(../assets/h_gongqiu.png) no-repeat;
      //   background-size: 18px 17px;
      //   background-position: 18px 13px;
      // }
      // p:nth-of-type(9){
      //   background: url(../assets/h_gongqiu.png) no-repeat;
      //   background-size: 18px 17px;
      //   background-position: 18px 13px;
      // }
    }
    .bot_btn{
      width: 300px;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(0deg, #F0BE57, #E0AC56);
      border-radius: 4px;
      font-size: 20px;
      font-weight: 600;
      color: #FFFFFF;
      text-align: center;
      margin: auto;
      margin-top: 5px;
    }
  }
  .yefb{
    display: inline-block;
    width: 320px;
    height: 364px;
    box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
    margin: 0 10px;
    margin-top: 21px;
    .single_p{
      line-height: 1.9;
    }
  }
  .yefb_head{
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    padding: 0  17px 0 10px;
        display: flex;
    align-items: center;
    position: relative;
    height: 60px;
    margin-bottom: 12px;
    line-height: 1;
    background: linear-gradient(0deg, #67B3E2, #125E97);
    .icon{
      position: absolute;
      right: 17px;
      top: 23px;
      width: 18px;
      height: 18px;
      background: url(../assets/h_play.png) no-repeat;
      background-size: 18px 18px;
    }
  }
  .yefb_head_box{
    border-left: 2px solid #F9F9F9;
    padding-left: 13px;

  }
  .cnlist{
    position: absolute;
    right: 0;
    top: 21px;
    width: 320px;
    height: 700px;
    background-color: #ffffff;
    box-shadow: 0px 1px 3px 0px rgba(94, 94, 94, 0.47);
    .cnl_head{
      // background: linear-gradient(0deg, #F6F6F6, #DCDCDC);
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 26px;
      height: 26px;
      padding-left: 10px;
      background: #DCDCDC url(../assets/line.png);
      background-size: 16px 16px;
      background-position: 115px center;
      background-repeat: no-repeat;
    }
    .cnlist_info{
      .single{
        padding: 6px 11px 0;
        height: 50.1px;
      }
      .cn_name{
        font-weight: bold;
        color: #2875AB;
      }
      .cn_box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        p{
          margin-right: 8px;
        }
      }
      .single:nth-child(even){
        .cn_name{
          color: #000000;
        }
        background: #F2F4F6;
      }
    }
  }
  .zbfb{
    // position: absolute;
    // top: 421px;
    // left: 0;
    // float: left;
    width: 650px;
    height: 300px;
    margin-top: 20px;
    .zbfb_boxs{
      width: 630px;
      height: 233px;
      padding: 16px 0;
      box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
    }
    .info{
      width: auto;
    }
  }  
  .mqft{
    width: 980px;
    margin: 30px auto 32px auto;
    .swi_box{
      height: 154px;
    }
    .mqft_swiper{
      margin-top: 13px;
    }
  }
  .bg{
    width: 100%;
    // left: -470px;
    height: 130px;
    background: #DEDEDE;
  }
}



.page4{
  position: relative;
  width: 982px;
  margin:30px auto 0;
  .head_left{
    width: 652px;
    display: inline-block;
    overflow: hidden;
    .p2_com{
      margin-bottom: 0;
    }
  }
  .p2_com{
    display: inline-block;
    width: 320px;
    height: 280px;
    @extend .com_shad;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .p2_1{
    margin-right: 10px;
  }
  .head_right{
    position: absolute;
    top: 29px;
    display: inline-block;
    width: 320px;
    height: 323px;
    margin-left: 10px;
    box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
    .hr_t{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 0 10px;
      width: 290px;
      height: 60px;
      background: #2775AB;
      border-radius: 4px 4px 0px 0px;
    }
    .hr_t_l{
      font-size: 14px;
      color: #fff;
      border-left: 2px solid #ffffff;
      padding-left: 9px;
      font-weight: bold;
      line-height: 1;
    }
    .hr_t_r{
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #fff;
    }
    .hr_t_r_m{
      font-size: 28px;
      color: #E7B456;
      margin-right: 10px;
    }
    .hr_t_r_y{
      width: 36px;
      display: flex;
      flex-direction: column;
      span{
        line-height: 1;
      }
    }
    .hr_mid{
      display: flex;
      flex-wrap: wrap;
      span{
        display: inline-block;
        width: 21px;
        margin: 12px 12px;
        text-align: center;
      }
    }
  }
  .p4_bottom{
    margin-top: 10px;
    display: flex;
    margin-bottom: 31px;
  }
  .yxgys{
    width: 320px;
    height: 514px;
    box-shadow: 0px 1px 3px 0px rgba(125, 125, 125, 0.47);
  }
  .ys_head{
    height: 13px;
    background: linear-gradient(181deg, #59A6D7, #1D6AA1);
  }
  .ys_single{
    display: flex;
    align-items: center;
    height: 67px;
    padding: 0 25px 0 9px;
    border-bottom: 1px solid #F3F6F8;
    img{
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      margin-right: 9px;
    }
    p{
      flex: 1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: #2D2D2D;
      font-weight: bold;
    }
  }
  .p4_mid{
    width: 320px;
    margin: 0 10px;
  } 
  .bs_down{
    width: 320px;
  }
  .bs_down_tit{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    background: url(../assets/h_bias.png),url(../assets/h_bias.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 center, 100% center;
    background-size: 112px 12px,112px 12px;
  }
  .bd_single{
    background-color: #F3F6F8;
  }
  .bd_single:nth-child(odd){
    .left{
      background: url(../assets/h_down_unsel.png) no-repeat;
    }
  }
  .bd_single{
    height: 62.3px;
    // background: #F3F6F8;
    display: flex;
    margin-top: 7px;
    overflow: hidden;
    .left{
      width: 67px;
      height: 100%;
      flex-shrink: 0;
      // background-color: #2775AB;
      margin-right: 5px;
      background: url(../assets/h_down_sel.png) no-repeat;
    }
    .right{
      padding-right: 12px;
      .bs_title{
        font-size: 12px;
        color: #3976A4;
        margin: 6px 0 3px 0;
      }
      .bs_note{
        font-size: 9px;
        color: #4B4B4B;
      }
    }
  }
  .home_font_box{
    width: 651px;
  }
  .p2_com_title_r{
    margin: 9px 0;
    .limit_p{
      margin-bottom: 9px;
    }
  }
}

.page5{
  height: 844px;
  background: url(../assets/h_earth.png) no-repeat;
  background-size: 1920px 844px;
  background-position: center center;
  padding: 32px 0  36px 0;
  overflow: hidden;
  .content{
    width: 982px;
    height: 718px;
    background-color: #ffffff;
    border-radius: 10px;
    margin:  auto ;
    margin-top: 32px;
    padding: 29px 0 41px 0;
    display: flex;
    .left{
      width: 640px;
      margin: 0 20px 0 12px;
    }
    .right{
      width: 300px;
      overflow: hidden;
    }
    img{
        width: 122px;
        height: 151px;
        background-color: #898989;
        margin-right: 6px;
      }
  }
  .yzzq{
    border-bottom: 5px solid #626262;
    padding-bottom: 20px;
    .yzzq_info{
      margin-top: 23px;
      font-size: 12px;
    }
    .imglist{
      margin-top: 16px;
    }
  }
  .yhrz{
    margin-top: 18px;
    .yhrz_box{
      display: flex;
      margin-top: 17px;
    }
    .yhrz_l{
      width: 311px;
      height: 176px;
      background: #FFFFFF;
      margin-right: 9px;
      box-shadow: 0px 1px 3px 0px rgba(94, 94, 94, 0.47);
      .yhrz_l_box{
        height: 26px;
        background: linear-gradient(0deg, #D91D1D, #FE6759);
      }
      .yhrz_l_til{
        text-align: center;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
        color: #FFFFFF;
        font-weight: bold;
        background: url(../assets/h_start_l.png),url(../assets/h_start_r.png);
        background-repeat: no-repeat,no-repeat;
        background-position: 15% center,85% center;
      }
      .yhrz_l_list{
        margin-top: 19px;
      }
    }
    .yhrz_r{
      width: 321px;
      height: 176px;
      background: #FFFFFF;
      box-shadow: 0px 1px 3px 0px rgba(94, 94, 94, 0.47);
      .btn{
        width: 299px;
        text-align: center;
        height: 25px;
        line-height: 25px;
        background: linear-gradient(0deg, #F0BE57, #E0AC56);
        border-radius: 4px;
        margin: 112px auto 0 auto;
        color: #fff;
      }
    }
  }
  .zszs{
    margin-top: 18px;
    .imglist{
      margin-top: 17px;
    }
  }
  .supply_p5{
    width: 298px;
    // height: 226px;
    border: 1px solid #959595;
    background-color: #ffffff;
    margin-top: 7px;
  }
}

.page6{
  width: 980px;
  margin: auto;
  padding-bottom: 66px;
  .imglist{
    display: flex;
    margin: 26px 0 24px 0;
    img{
      width: 236px;
      height: 154px;
      background: #DEDEDE;
      border-radius: 4px 0px 0px 4px; 
      margin-right: 12px;
    }
  }
  .area{
    margin-top: 43px;
  }
  .a_title{
    font-size: 18px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 7px;
  }
  .areas{
    padding-top: 7px !important;
    .com_box{
      display: inline-block;
      font-size: 14px;
      color: #555555;
      margin-right: 29px;
      margin-top: 11px;
      span{
        margin-left: 15px;
      }      
    }
    .box1{
        width: 360px;
    }
    .box2{
        width: 289px;
    }
    .box3{
        width: 244px;
    }
    .t1{
      display: inline-block;
      width: 59px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      background: #2775AB;
      border-radius: 9px;
      color: #ffffff;
      font-weight: bold;
      margin-left: 0 !important;
    }
  }
  .com_pad_box{
    // height: 106px;
    padding: 18px 0 15px 0;
    border-top: 1px solid #555555;
    border-bottom: 1px solid #555555;
    font-size: 14px;
  }
  // 友情链接
  .links{
    margin-top: 24px;
  }
  .link_box span{
    display: inline-block;
    margin-right: 15px;
    line-height: 1.8;
  }
}

.page_bottom{
  width: 100%;
  height: 230px;
  background-color: #2775AB;
  border-bottom: 1px solid #F6F6F6;
  .ctx{
    width: 980px;
    height: 100%;
    margin: auto;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
  }
  .ctx_til{
    margin-top: 23px;
    font-size: 18px;
    color: #FFFFFF;
  }
  .ctx_info{
    margin-top: 11px;
    font-size: 14px;
    color: #FFFFFF;
    span{margin-left: 31px;}
  }
  .r_ctx{
    position: absolute;
    right: 0;
    top: 33px;
    width: 233px;
    height: 160px;
    img{
      width: 106px;
      height: 106px;
    }
    img:nth-child(1){
      margin-right: 21px;
    }
    p{
      display: inline-block;
      font-size: 14px;
      color: #FFFFFF;
      width: 86px;
      height: 34px;
      padding: 0 10px;
      margin-top: 15px;
    }
    p:nth-of-type(1){
      margin-right: 21px;
    }
  }
}

.page_bottom_about{
  font-size: 14px;
  color: #ffffff;
  height: 50px;
  background-color: #2775AB;
  .page_bottom_cont{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 980px;
    margin: auto;
    .pba_left{
      display: flex;
    justify-content: space-between;
    align-items: center;
      span{
        display: inline-block;
        margin-right: 10px;
      }
    }
    .pba_right{
      display: flex;
      justify-content: space-between;
      align-items: center;
      img{
        width: 73px;
        height: 22px;
        margin-right: 22px;
      }
    }
  }
}


</style>

<style lang="scss" >
.zbfb .info{
    width: auto;
} 
.page4{
    .p2_com{
      height: 252px !important;
      margin-bottom: 0;      
    }
    .p2_com:nth-child(1){
      margin-bottom: 5px;      
    }
}
</style>